{% extends "base.html" %}
{% block content %}

<div class="row">
    <div id="monitor_list" style="float: left; width: 500px; height: 350px;">
    </div>
    <div id="monitor_pie" style="float: left; width: 550px; height: 350px;">
    </div>
</div>
<HR style="" width="90%">
<div class="row">
    <div id="host_list" style="float: left; width: 550px; height: 350px;">
    </div>
    <div id="host_pie" style="float: left; width: 500px; height: 350px;">
    </div>
</div>

<script type="text/javascript">
    var monitorlist_Chart = echarts.init(document.getElementById('monitor_list'));
    var hostlist_Chart = echarts.init(document.getElementById('host_list'));
    var monitorpie_Chart = echarts.init(document.getElementById('monitor_pie'));
    var hostpie_Chart = echarts.init(document.getElementById('host_pie'));
    var hostlist_option = {
        title : {
            text: '平台告警统计',
            subtext: 'ping, mem, disk, swap'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['连通性','内存','磁盘','Swap']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['支付','客户','账单','容灾']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'连通性',
                type:'bar',
                data:[{{ graph3[0] }}],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
            },
            {
                name:'内存',
                type:'bar',
                data:[{{ graph3[1] }}],
                markLine : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                }
            },
            {
                name:'磁盘',
                type:'bar',
                data:[{{ graph3[2] }}],
                markLine : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                }
            },
            {
                name:'Swap',
                type:'bar',
                data:[{{ graph3[3] }}],
                markLine : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                }
            }
        ]
    };
    var monitorlist_option = {
        title: {
            x: 'center',
            text: '异常告警统计',
            subtext: '所有异常情况',
            link: 'http://localhost:5000/hosts_monitor'
        },
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        xAxis: [
            {
                type: 'category',
                show: false,
                data: ['连通性异常', '内存告警', '磁盘告警', 'Swap告警']
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: '异常告警统计',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              '#C1232B','#FCCE10','#F3A43B','#F0805A'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                data: [{{ graph1 }}],
                markPoint: {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(0,0,0,0)',
                        formatter: function(params){
                            return '<img src="'
                                    + params.data.symbol.replace('image://', '')
                                    + '"/>';
                        }
                    },
                }
            }
        ]
    };

    var hostpie_option = {
        title : {
            text: '各平台服务器统计',
            subtext: '平台容量',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['支付平台','客户平台','账单平台','容灾环境']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'数量统计',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:{{ graph4[0] }}, name:'支付平台'},
                    {value:{{ graph4[1] }}, name:'客户平台'},
                    {value:{{ graph4[2] }}, name:'账单平台'},
                    {value:{{ graph4[3] }}, name:'容灾环境'},
                ]
            }
        ]
    };

    var monitorpie_option = {
        title : {
            text: '',
            subtext: '各平台告警统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
//            x : 'center',
//            y : 'bottom',
            data:['支付告警','客户告警','账单告警','容灾告警']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'告警模式',
                type:'pie',
                radius : [30, 110],
                center : ['40%', 200],
                roseType : 'area',
                x: '50%',               // for funnel
                max: 40,                // for funnel
                sort : 'ascending',     // for funnel
                data:[
                    {value:{{ graph2[0] }}, name:'支付告警'},
                    {value:{{ graph2[1] }}, name:'客户告警'},
                    {value:{{ graph2[2] }}, name:'账单告警'},
                    {value:{{ graph2[3] }}, name:'容灾告警'}
                ]
            }
        ]
    };


    hostlist_Chart.setOption(hostlist_option);
    monitorlist_Chart.setOption(monitorlist_option);
    hostpie_Chart.setOption(hostpie_option);
    monitorpie_Chart.setOption(monitorpie_option);
</script>

{% endblock %}
